<template>
  <div>
    <h1>子组件</h1>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";

export default defineComponent({
  setup() {
    onBeforeMount(() => {
      console.log("子组件的onBeforeMount");
    });
    onMounted(() => {
      console.log("子组件的onMounted");
    });
    onBeforeUpdate(() => {
      console.log("子组件的onbeforeUpadte");
    });
    onUpdated(() => {
      console.log("子组件的onUpdated");
    });
    onBeforeUnmount(() => {
      console.log("子组件的onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("子组件onUnmounted");
    });
    return {};
  },
  beforeCreate() {
    console.log("子组件的beforeCreate");
  },
  created() {
    console.log("子组件的created");
  },
  beforeMount() {
    console.log("子组件的beforeMount");
  },
  mounted() {
    console.log("子组件的mounted");
  },
  beforeUpdate() {
    console.log("子组件的beforeUpdate");
  },
  updated() {
    console.log("子组件的updated");
  },
  beforeUnmount() {
    console.log("子组件的beforeUnmount");
  },
  unmounted() {
    console.log("子组件的unmounted");
  },
});
</script>

<style scoped>
</style>